<script setup lang="ts">
import KnowledgeCard from './KnowledgeCard.vue'
import { ref } from 'vue'
import { homeKnowledge } from '@/services/consult'
import type { KnowledgeList, KnowledgeType, KnowledgeData } from '@/types/consult'

// 是否正在请求下一页的数据
const loading = ref(false)
// 是否还有更多数据
const finished = ref(false)
// 当前页
const current = ref(1)
// 页容量
const pageSize = 5
const props = defineProps<{ type: KnowledgeType }>()
// 数据源列表
const list = ref<KnowledgeList>([])
const knowledgeObj = ref<KnowledgeData>({} as KnowledgeData)
// 上拉加载更多
async function onLoad() {
  const res = await homeKnowledge({ type: props.type, current: current.value, pageSize: pageSize })
  console.log(res)
  // 保存数据源对象
  knowledgeObj.value = res.data
  // list.value = res.data.rows
  list.value = [...list.value, ...res.data.rows]
  // 关闭加载状态
  loading.value = false
  // 当前页加一
  current.value += 1
  // 判断是否还有下一页
  if (knowledgeObj.value.total === list.value.length) {
    finished.value = true
  }
}
</script>

<template>
  <div class="knowledge-list">
    <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <knowledge-card :item="i" v-for="i in list" :key="i.id"></knowledge-card>
    </van-list>
  </div>
</template>

<style lang="scss" scoped>
.knowledge-list {
  padding: 0 15px;
}
</style>
